<script setup lang="ts">
import {ref, watch} from "vue";
import {useSysStore} from "stores/sysStore";
import {Wss} from "src/utils/type";

let sysStores = useSysStore()
let showDia = ref(false)
let workerList = ref([])

watch(() => sysStores.wssMessage, (newVal) => {
  let msg: Wss = (newVal as Wss);
  //如果坐席是在等待状态
  if (msg.message_type == "online_users") {
    workerList.value = msg.message.masters
  }
}, {
  deep: true,
})

//邀请部门工作人员触发该方法
const invite = (worker) => {
  sysStores.sendWss({
    message_type: "create_other_token",
    message: sysStores.channelName,
    to_many: [Number(worker.id)]
  })
  showDia.value = false;
}


const openDialog = () => {
  showDia.value = true;
  sysStores.sendWss({message_type: 'get_online_users'});
}


defineExpose({
  openDialog
})
</script>

<template>
  <q-dialog v-model="showDia" position="right">
    <q-card>
      <q-card-section class="row items-center q-pb-none">
        <div class="com-tit">邀请其他部门在线人员协助</div>
        <q-space/>
        <q-btn icon="close" flat round dense v-close-popup/>
      </q-card-section>

      <q-card-section>
        <div class="worker-com">
          <div class="work-crowd" v-for="x in workerList">
            <div class="user-out">
              <img class="user" src="../../assets/images/user.png">
              <div class="des">
                <div class="d1">{{ x.name }}</div>
                <div class="d2">{{ x.department_name }}</div>
              </div>
            </div>
            <img class="call" @click="invite(x)" src="../../assets/images/call.png">
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
.com-tit {
  font-size: 16px;
  color: grey;
}

.worker-com {
  width: 300px;
  background-color: white;

  .work-crowd {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateX(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .user-out {
      display: flex;
      margin-bottom: 10px;
      justify-content: start;
      align-items: center;
      cursor: pointer;
    }

    .user {
      width: 30px;
      height: 30px;
      border-radius: 10px;
    }

    .call {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      cursor: pointer;
    }

    .call:hover {
      transform: scale(1.2);
      transition: all 0.3s ease;
    }

    .des {
      padding-left: 10px;

      .d1 {
        font-size: 14px;
        font-weight: 500;
      }

      .d2 {
        font-size: 12px;
        color: #828282;
      }
    }
  }
}
</style>
